<template>
<div>
    <h1>数字猜谜游戏</h1>
    <p>猜一个1到100之间的数字:</p>
    <input v-model="userGuess" type="number" min="1" max="100" />
    <button @click="checkGuess">提交猜测</button>
    <p>{{ message }}</p>
    <button @click="resetGame">重新开始</button>
</div>
</template>

<script setup>
import {ref} from 'vue';

const randomNumber = ref(Math.floor(Math.random() * 100) + 1);
const userGuess = ref('');
const message = ref('');

const checkGuess = () => {
    if(userGuess.value < randomNumber.value){
        message.value = '太小了!';
    }
    else if (userGuess.value > randomNumber.value){
        message.value = '太大了!'
    }
    else{
        message.value='终于猜对了,是' + randomNumber.value;
    }
}
// 下面是重新开始的方法
const resetGame = () => {
    randomNumber.value = Math.floor(Math.random() * 100) + 1;
    userGuess.value = '';
    message.value = '';
}

</script>

<style>
</style>